<!DOCTYPE html>
<html>
<head>
    <title>广告主账号管理</title>
    <#include "/header.html">
    <link
            href="${request.contextPath}/statics/plugins/jquery-layout/jquery.layout-latest.css"
            rel="stylesheet" />
</head>
<body>


<div id="rrapp" v-cloak class="container-div ui-layout-center">
    <div v-show="showList">
        <!--<span id="directory" class="switch-on"></span>-->
       <div class="grid-btn">
           <div class="layui-col-md2" style="margin-left: 20px;">
               <select class="selectpicker" id="siteSelect" data-actions-box="true" data-select-all-text="全选" data-deselect-all-text="取消全选" data-deselect-all-text="全选" title="请选择平台名称" multiple  style="width:100%;" >
               </select>
           </div>
            <div class="layui-col-md2" style="margin-left: 20px;">
                <input  type="text" class="form-control" v-model="q.accountName" placeholder="请输入广告主账号名称"/>
            </div>
            <div class="layui-col-md4" style="margin-left: 20px;">
                <button  ref="schedule_search" class="btn btn-info" @click="setAccounType">批量设置广告账号类型</button>
                <button  ref="schedule_search" class="btn btn-default" @click="query">查询</button>
            </div>
        </div>
</div>
<div class="col-sm-12 select-info table-striped">
    <table id="bootstrap-table" data-mobile-responsive="true"></table>
</div>

</div>


<script
        src="${request.contextPath}/statics/plugins/jquery-layout/jquery.layout-latest.js"></script>


<!-- <script src="${request.contextPath}/statics/js/modules/sys/user.js?_${.now?long}"></script>
-->
<script>


    $(document)
        .ready(
            function() {
                $('body').layout({
                    west__size : 185
                });
                $("#siteSelect").selectpicker({
                    noneSelectedText: '请选择',
                    countSelectedText: function(){}
                });
                vm.getAccountPidList();
               $('#bootstrap-table')
                    .bootstrapTable(
                        {
                            method : 'post', // 服务器数据的请求方式 get or post
                            contentType : "application/json",
                            url : baseURL + 'biddingAccount/findBiddingAdvertiserAccount', // 服务器数据的加载地址
                            showRefresh : true,
                            showToggle : true,
                            showColumns : true,
                            //showExport :true,
                            sortable: true,
                            sortName:"userId",// 排序列名称
                            sortOrder: "desc",
                            iconSize : 'outline',
                            toolbar : '#exampleToolbar',
                            striped : true, // 设置为true会有隔行变色效果
                            dataType : "json", // 服务器返回的数据类型
                            pagination : true, // 设置为true会在底部显示分页条
                            // queryParamsType : "limit",
                            // //设置为limit则会发送符合RESTFull格式的参数
                            singleSelect : false, // 设置为true将禁止多选
                            // contentType : "application/x-www-form-urlencoded",
                            // //发送到服务器的数据编码类型
                            pageSize : 10, // 如果设置了分页，每页数据条数
                            pageNumber : 1, // 如果设置了分布，首页页码
                            // search : true, // 是否显示搜索框
                            //showColumns : false, // 是否显示内容下拉框（选择显示的列）
                            sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者
                            // "server"
                            queryParams : function(params) {
                                //console.log(params)
                                vm.pgNum = (params.offset/params.limit) + 1;
                                vm.pgSize = params.limit;
                                return {
                                    // 说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
                                    limit : params.limit,
                                    page : (params.offset/params.limit) + 1,
                                    accountType : 4,
                                    accountName:vm.q.accountName
                                    // sidx: params.sort,      //排序列名
                                    //order: params.order //排位命令（desc，asc）
                                    /* sort:"userId",
                                    order:"desc" */
                                };
                            },
                            // //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
                            // queryParamsType = 'limit' ,返回参数必须包含
                            // limit, offset, search, sort, order 否则, 需要包含:
                            // pageSize, pageNumber, searchText, sortName,
                            // sortOrder.
                            // 返回false将会终止请求
                            columns : [
                                {
                                    checkbox : true
                                },
                                {
                                    field : 'accountName',
                                    align:'center',
                                    title : '账号名称'
                                },
                                {
                                    field : 'email',
                                    align:'center',
                                    title : '邮箱'
                                },
                                {
                                    field : 'mobile', // 列字段名
                                    align:'center',
                                    title : '手机号',// 列标题
                                },
                               {
                                    field : 'biddingAccountType', // 列字段名
                                    align:'center',
                                    title : '账户类型',// 列标题
                                    formatter : function(
                                       value, row,
                                       index) {
                                       //console.log(row)
                                        var typeText = '';
                                        if(row.biddingAccountType==1){
                                            typeText = '内部';
                                        }else if(row.biddingAccountType==2){
                                            typeText = '外部';
                                        }else{
                                            typeText = '全部'
                                        }
                                       var e = '<span>'+typeText+'</span>';
                                       return e;
                                   }
                                },
                                {
                                    field : '',
                                    align:'center',
                                    title : '操作',
                                    formatter : function(
                                        value, row,
                                        index) {
                                        //console.log(row)
                                        var e = '<a  class="btn btn-primary btn-sm '
                                            + ''
                                            + '" href="#" mce_href="#" title="编辑" onclick="setAccounType(\''
                                            + row.accountId
                                            + '\')"><i class="fa fa-edit "></i>设置账户类型</a> ';
                                        return e;
                                    }
                                }]
                        });
            });
    var vm = new Vue({
        el : '#rrapp',
        data : {
            q : {
                accountName:''
            },
           showList : true
        },
        methods : {
            query : function() {
                vm.reload();
            },
            getAccountPidList:function () {
                $.ajax({
                    type : "post",
                    url : baseURL+"biddingAccount/findBiddingAdvertiserAccount",
                    data:JSON.stringify({accountType : 1}),
                    contentType : "application/json",
                    dataType : "json",
                    success: function(data) {
                        if (data.code == 0) {
                            var _html = ''
                            var _arr = []
                            for (var i = 0; i < data.platformList.length; i++) {
                                _html = _html + '<option value="' + data.platformList[i].platformId + '">' + data.platformList[i].nickName + '</option>'
                                _arr.push(data.platformList[i].platformId)
                            }
                            $('#siteSelect').html(_html);
                           // $('#siteSelect').val(_arr)
                            $('#siteSelect').selectpicker('refresh');
                        }
                    }
                    });
            },
            setAccounType:function () {
                var userIds = getSelectedRows();
                var accountId = [];
                //console.log(userIds);
                if(userIds){
                    userIds.map(function (item) {
                        if(accountId.indexOf(item.accountId)==-1){
                           accountId.push(item.accountId);
                        }
                    });
                    openLayer(accountId);
                }
            },
            reload : function() {
                vm.showList = true;
                 $('#bootstrap-table').bootstrapTable('refresh',
                    {
                        accountType : 4,
                        accountName:vm.q.accountName
                   });
             }
          }
    });
    function setAccounType(aid) {
        var aidArr = [aid];
        openLayer(aidArr);
    }
    function modalCon() {
            return  ' <div class="row" style="width:98%;margin: 20px auto">'
            +'<div class="col-sm-12">'
            +'<div class="input-group">'
            +'<span class="input-group-addon"> 账号类型:</span>'
            +'<select class="selectpicker" id="accountTypeId"  style="width:100%;">'
            +'<option value="0">全部</option>'
            +'<option value="1">内部</option>'
            +'<option value="2">外部</option>'
            + '</select>'
            +'</div>'
            +'</div>'
            +'</div>';
    }
    function openLayer(accountId) {
        var accountId = accountId;
        layer.open({
            type: 1,
            skin: 'layui-layer-molv',
            title: "广告主账号类型设置",
            area: ['550px', '250px'],
            shadeClose: false,
            content:modalCon(),
            btn: ['确定', '取消'],
            success:function (layero, index) {
                //console.log(index,'111111');
                $('#accountTypeId').selectpicker('refresh');
            },
            btn1: function (index) {
                var params = {
                    accountId:accountId,
                    biddingAccountType:$("#accountTypeId").val()
                };
                $.ajax({
                    type: "POST",
                    url: baseURL + "biddingAccount/updateBiddingAccountType",
                    contentType : "application/json",
                    data : JSON.stringify(params),
                    dataType: "json",
                    success: function (result) {
                        if (result.code == 0) {
                            layer.close(index);
                            alert('操作成功', function() {
                                vm.reload();
                            });
                        } else {
                            layer.alert(result.msg);
                        }
                    }
                });
            }
        });
    }
</script>


</body>
</html>